<template>
  <div>
    <!--
      list组件:
      触底加载更多-列表组件
      v-model: 是否处于加载更多状态 (loading为true, 则触底不会再额外触发load事件)
      finished: 如果设置为true就证明没有更多数据了 (列表加载全都完毕了)
      finished-text: 加载完成底部提示文字
      load事件: 组件内部源码检测到滚动到底部后, 会$emit触发load事件, 执行你编写的onLoad事件函数, 加载更多数据, 把列表撑高

      pullRefresh组件:
      v-model: 控制顶部是否显示加载文字(组件是否处于加载中状态) true是, false不是 (拉动的时候, 组件内会自己修改对应变量值为true)
     -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <!-- 文章列表 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        offset="50"
        :immediate-check="false"
      >
        <article-item
          v-for="item in articleList"
          :key="item.art_id"
          :obj="item"
          @click.native="$router.push(`/article_detail?art_id=${item.art_id}`)"
        ></article-item>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticleListAPI } from '@/api/index'
import ArticleItem from '../../components/ArticleItem.vue'
import { timeAgo } from '@/utils/date'
export default {
  props: {
    cid: Number // 频道id
  },
  components: {
    // 选项式API, 局部注册组件的选项
    // key:组件标签名, value: 组件对象
    ArticleItem
  },
  data () {
    return {
      articleList: [], // 文章列表
      loading: false, // // 加载中更多状态开关(list组件内部检测到触底后会自动影响它为true值)
      finished: false, // 列表数据是否"全都"加载完成(如果没有更多了, 就设置它为true, 触底了也不会再触发load事件)
      nextTime: new Date().getTime(), // 文章列表获取的, 时间戳(开始)
      refreshing: false // 顶部加载中状态
    }
  },
  created () {
    // 组件第一次创建, 先走created -> 发请求拿到第一段文章列表数据
    this.getArticleList()
    // 页面上就有了10条文章铺设, 保存nextTime
    // 用户滚动后触发list组件load事件 -> 执行onLoad方法 -> 带着之前保存nextTime再请求下一段数据
  },
  methods: {
    // 获取文章列表数据
    async getArticleList () {
      const res = await getArticleListAPI({
        channel_id: this.cid,
        timestamp: this.nextTime // 把当前系统的时间戳传递给服务器
      })

      this.articleList = [...this.articleList, ...res.data.data.results]// 把旧的数据在前, 新的数据在后, 拼接一个全新的数组, 铺设列表
      this.articleList.forEach(item => {
        item.pubdate = this.timeAgo(item.pubdate)
      })
      // console.log(this.articleList)
      this.nextTime = res.data.data.pre_timestamp // 拿到pre_timestapme, 为请求下一页做准备
      this.loading = false // 加载中转圈(停下了), 新的数据已经加载列表已经撑开, 设置为false, 为下载触底加载做准备
      this.refreshing = false // 顶部刷新停下
      if (res.data.data.pre_timestamp === null) {
        // 证明没有下一页的数据了
        this.finished = true // 告诉list组件再触底也不执行load事件
      }
    },
    timeAgo: timeAgo,
    // list组件触底加载更多的时间方法
    onLoad () {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      if (this.articleList.length > 0) {
        // 文章列表里有值的时候 再走onload
        this.getArticleList()
      }
    },
    // 下拉刷新
    onRefresh () {
      this.articleList = [] // 把旧的数据清空
      this.nextTime = new Date().getTime() // 重新设置系统时间
      this.getArticleList() // 重新发送请求
    }
  }
}

// 加载更多(比较难)
// 1. 先准备van-list组件, 并包裹自己列表, 实现2个属性, 1个方法
// 2. 要更多数据, 看接口文档, 要timestamp, 所以准备nextTime变量, 每次都保存新的一段数据最后一条文章的时间戳
// 3. onLoad中, 发新的请求带新的nextTime, 数据回来后, 拼接数组
// 4. list组件本次加载更多后, 把loading改回成false, 为下次触底加载load事件做准备
// 5. 看好加载完成的条件, 把finished改成ture, 不让list再触发onload了

// 问题: key的值(文章id)重复了
// 原因: 发现页面确实有一样的文章, 根据文章id数字, 看network响应的数据, 发现了请求发了2次
// 问题: 正常情况应该是请求一次, 但现在请求2次不正常
// 原因: created走一次, onload上来也走了一次
// 具体原因: 组件标签会先执行, 然后网络请求耗时(等等), list组件创建时立即检查触底(但是数据还未回来), 所以触底判断生效, onLoad上来就执行了
// 解决方案1: 可以把created里请求注释掉, 让他上来走onLoad的
// 解决方案2: list组件设置:immediate-check="false"
// 解决方案3: onLoad里写判断, 之前数组里有数据, 我们再加载更多

// 问题: 先往下滚动, 然后切换别的频道
// list组件的load事件还是会上来就触发
// 原因: 略看了下list组件源码, immediate-check只能让list组件挂载后不检查滚动位置, 但是滚动事件触发, 它还是进入了内部check检查方法中, 而且切换会让滚动条, 自动回到顶部, 触发滚动事件
// list组件created和load又会执行2遍
// 解决: onLoad里写判断, 之前数组里有数据, 我们再加载更多
</script>

<style>
</style>
